<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '编辑笔记',
  },
}
</route>
<template>
  <view class="note-edit-page">
    <!-- 自定义导航栏 -->
    <view
      class="custom-nav-bar bg-white p-4 border-b border-gray-200 flex justify-between items-center"
      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
    >
      <view class="flex items-center">
        <text class="i-fa-solid:chevron-left text-lg mr-2" @click="goBack"></text>
        <text class="text-xl font-semibold">{{ isEdit ? '编辑笔记' : '新建笔记' }}</text>
      </view>
      <view>
        <text class="text-blue-500 font-medium" @click="saveNote">保存</text>
      </view>
    </view>

    <!-- 编辑区域 -->
    <view class="note-edit-container">
      <!-- 标题输入 -->
      <input type="text" class="note-title-input" placeholder="输入标题..." v-model="note.title" />

      <!-- 内容输入 -->
      <textarea
        class="note-content-input"
        placeholder="输入笔记内容..."
        v-model="note.content"
        :maxlength="-1"
        :auto-height="true"
      ></textarea>
    </view>

    <!-- 底部工具栏 -->
    <view class="note-toolbar">
      <view class="toolbar-section">
        <view class="toolbar-item" @click="showColorPicker = true">
          <text class="i-fa-solid:palette toolbar-icon"></text>
        </view>
        <view class="toolbar-item" @click="addImage">
          <text class="i-fa-solid:image toolbar-icon"></text>
        </view>
        <view class="toolbar-item" @click="addList">
          <text class="i-fa-solid:list-ul toolbar-icon"></text>
        </view>
        <view class="toolbar-item" @click="addChecklist">
          <text class="i-fa-solid:tasks toolbar-icon"></text>
        </view>
      </view>

      <view class="toolbar-section">
        <view v-if="isEdit" class="toolbar-item" @click="confirmDelete">
          <text class="i-fa-solid:trash toolbar-icon text-red-500"></text>
        </view>
        <view class="toolbar-item" @click="addTag">
          <text class="i-fa-solid:tag toolbar-icon"></text>
        </view>
      </view>
    </view>

    <!-- 标签显示区域 -->
    <view v-if="note.tags.length > 0" class="tags-container">
      <view v-for="(tag, index) in note.tags" :key="index" class="tag-item">
        <text class="tag-text">{{ tag }}</text>
        <text class="i-fa-solid:times tag-remove" @click="removeTag(index)"></text>
      </view>
    </view>

    <!-- 颜色选择器弹窗 -->
    <view v-if="showColorPicker" class="overlay" @click="showColorPicker = false">
      <view class="picker-popup" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择颜色</text>
          <text class="picker-close" @click="showColorPicker = false">取消</text>
        </view>
        <view class="picker-content">
          <view class="color-grid">
            <view
              v-for="(color, index) in colors"
              :key="index"
              class="color-item"
              :style="{ backgroundColor: color.hex }"
              @click="selectColor(color.hex)"
            >
              <text v-if="note.color === color.hex" class="i-fa-solid:check text-white"></text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加标签弹窗 -->
    <view v-if="showTagInput" class="overlay" @click="showTagInput = false">
      <view class="picker-popup" @click.stop>
        <view class="picker-header">
          <text class="picker-title">添加标签</text>
          <text class="picker-close" @click="showTagInput = false">取消</text>
        </view>
        <view class="picker-content">
          <input
            type="text"
            class="tag-input"
            placeholder="输入标签名称..."
            v-model="newTag"
            @confirm="addTagConfirm"
          />
          <button type="primary" class="confirm-button" @click="addTagConfirm">添加</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'NoteEditPage',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 是否为编辑模式
const isEdit = ref(false)
// 笔记ID参数
const noteId = ref('')

// 弹窗状态
const showColorPicker = ref(false)
const showTagInput = ref(false)

// 新标签
const newTag = ref('')

// 颜色选项
const colors = ref([
  { name: '默认', hex: '#ffffff' },
  { name: '红色', hex: '#ffcdd2' },
  { name: '橙色', hex: '#ffe0b2' },
  { name: '黄色', hex: '#fff9c4' },
  { name: '绿色', hex: '#c8e6c9' },
  { name: '蓝色', hex: '#bbdefb' },
  { name: '紫色', hex: '#e1bee7' },
  { name: '粉色', hex: '#f8bbd0' },
  { name: '灰色', hex: '#eeeeee' },
])

// 笔记数据
const note = ref({
  id: '',
  title: '',
  content: '',
  color: '#ffffff',
  tags: [] as string[],
  createdAt: '',
  updatedAt: '',
})

// 选择颜色
const selectColor = (color: string) => {
  note.value.color = color
  showColorPicker.value = false
}

// 添加图片
const addImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // 在实际应用中，这里应该将图片上传到服务器，然后获取URL
      // 为简化示例，这里直接在内容中添加标记
      note.value.content += '\n[图片]\n'
    },
  })
}

// 添加列表
const addList = () => {
  note.value.content += '\n• 列表项1\n• 列表项2\n• 列表项3\n'
}

// 添加检查列表
const addChecklist = () => {
  note.value.content += '\n☐ 任务1\n☐ 任务2\n☐ 任务3\n'
}

// 添加标签
const addTag = () => {
  showTagInput.value = true
}

// 确认添加标签
const addTagConfirm = () => {
  if (newTag.value && !note.value.tags.includes(newTag.value)) {
    note.value.tags.push(newTag.value)
    newTag.value = ''
  }
  showTagInput.value = false
}

// 移除标签
const removeTag = (index: number) => {
  note.value.tags.splice(index, 1)
}

// 确认删除
const confirmDelete = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除此笔记吗？此操作无法撤销。',
    success: (res) => {
      if (res.confirm) {
        deleteNote()
      }
    },
  })
}

// 删除笔记
const deleteNote = () => {
  // 在实际应用中，这里应该调用API删除笔记
  uni.showToast({
    title: '删除成功',
    icon: 'success',
  })
  setTimeout(() => {
    goBack()
  }, 1500)
}

// 保存笔记
const saveNote = () => {
  // 验证必填字段
  if (!note.value.title) {
    uni.showToast({
      title: '请输入标题',
      icon: 'none',
    })
    return
  }

  // 在实际应用中，这里应该调用API保存笔记
  const now = new Date().toISOString()
  if (!isEdit.value) {
    note.value.createdAt = now
  }
  note.value.updatedAt = now

  uni.showToast({
    title: isEdit.value ? '更新成功' : '创建成功',
    icon: 'success',
  })
  setTimeout(() => {
    goBack()
  }, 1500)
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onLoad((options) => {
  if (options && options.id) {
    isEdit.value = true
    noteId.value = options.id

    // 在实际应用中，这里应该根据noteId从API或存储中获取笔记详情
    // 这里使用模拟数据
    if (noteId.value === '1') {
      note.value = {
        id: '1',
        title: '会议记录',
        content:
          '今天的团队会议讨论了以下几点：\n\n1. 项目进度回顾\n2. 下周任务分配\n3. 新功能开发讨论\n\n需要完成的任务：\n☐ 完成UI设计评审\n☐ 解决已知的bug\n☐ 准备下次演示',
        color: '#bbdefb',
        tags: ['工作', '会议'],
        createdAt: '2023-06-18T10:00:00Z',
        updatedAt: '2023-06-18T10:30:00Z',
      }
    }
  }
})
</script>

<style lang="scss">
.note-edit-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f7;
}

.note-edit-container {
  flex: 1;
  width: 100%;
  padding: 16px;
  overflow-y: auto;
}

.note-title-input {
  width: 100%;
  padding: 8px 0;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 500;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #e5e5ea;
}

.note-content-input {
  width: 100%;
  min-height: 200px;
  font-size: 16px;
  line-height: 1.6;
  background-color: transparent;
}

.note-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background-color: white;
  border-top: 1px solid #e5e5ea;
}

.toolbar-section {
  display: flex;
  align-items: center;
}

.toolbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px;
}

.toolbar-icon {
  font-size: 20px;
  color: #333;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background-color: white;
  border-top: 1px solid #e5e5ea;
}

.tag-item {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background-color: #f2f2f7;
  border-radius: 16px;
}

.tag-text {
  margin-right: 4px;
  font-size: 14px;
  color: #333;
}

.tag-remove {
  font-size: 12px;
  color: #8e8e93;
}

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}

.picker-popup {
  width: 80%;
  overflow: hidden;
  background-color: white;
  border-radius: 12px;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e5e5ea;
}

.picker-title {
  font-size: 16px;
  font-weight: 500;
}

.picker-close {
  font-size: 16px;
  color: #007aff;
}

.picker-content {
  padding: 16px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.color-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 1px solid #e5e5ea;
  border-radius: 24px;
}

.tag-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  margin-bottom: 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
}

.confirm-button {
  height: 44px;
  line-height: 44px;
  color: white;
  background-color: #007aff;
  border-radius: 8px;
}
</style>
